<!DOCTYPE  html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${house.name}"></title>
    <meta content="width=1200, initial-scale=1, maximum-scale=1, user-scalable=1" name="viewport">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index_detail.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/zeng/lrtk.css}"/>
    <style>
        #sub-header{position: relative;border-bottom: 1px solid #f2f2f2}
    </style>
</head>
<body>
<div class="schb" style="display: none">
    <div class="sc">
        <div class="header">
            <span>提示</span><span class="close">×</span>
        </div>
        <div class="content">
            <span class="success">该房源收藏成功</span>
            <span class="go-resource"><a href="javascript:void(0);" class="see-sc">查看收藏的房源 >></a></span>
        </div>
    </div>
</div>
<div class="hb" style="display: none">
    <div class="lg">
        <div class="wel_icon separator"></div>
        <!-- 导航 -->
        <ul class="clearfix">
            <!--  <li class="check">快捷登录</li>-->
            <li class="check">账号密码登录</li>
        </ul>
        <!-- 显示/隐藏 -->
        <div class="passdl">
            <div class="input-list">
                <input type="text" name="user_name" id="user_name" required placeholder="请输入用户名/手机号">
            </div>
            <div class="input-list">
                <input type="password" name="user_pas" id="user_pas" required placeholder="请输入6-16位密码">
                <p id="login_message" class="invalid" style="display: block;"></p>
            </div>

            <div class="flex">
                <span class="unselected_icon" id="J-m-isSeven" data-isseven="0"></span><span class="mdl">一周内免登录</span>
                <a href="/findccount/index" class="forget-pass">忘记密码？</a>
            </div>
        </div>

        <div class="btn">
            <a href="javascript:;" id="login_button" th:data="'/detail?houseId='+${house.id}+'&type='+${type}">登 录</a>
        </div>
        <div class="go-register">没有账号？现在就去 <a th:href="'/register/index?uri=/detail?houseId='+${house.id}+'&type='+${type}">注册</a></div>
    </div>
</div>
<div th:replace="common-header :: #sub-header"></div>
<!-- 地区导航 -->
<div class="node_infor area">
    <a href="/">首页 > </a>
    <a href="/index" th:if="${type==1}" th:text=" 合租 "></a>
    <a href="/index" th:if="${type==2}" th:text=" 直租 "></a>
    <a href="/index" th:if="${type==3}" th:text=" 整租 "></a>
    <a href="/list" th:if="${type==4}" th:text=" 租房 "></a>
    <a href="/map" th:if="${type==5}" th:text=" 地图 "></a>
    <!-- 从首页那边过来的信息（其中一个租房模块的标题） -->
    <a href="javascript:;" th:text="' > '+${house.regionName}+'-'+${house.name}"></a>
</div>

<!-- 内容主体 -->
<div class="house" id="house">
    <div class="info">
        <div class="ib img" th:if="${null !=house.houseImageList && house.houseImageList.size()>0}">
            <img id="banner-img" th:alt="${house.name}" width="100%">
            <div class="slider">
                <span class="ib prev" onclick="detail_slider(-1, true)"></span>
                <!-- 轮播展示的宽度 -->
                <div class="show_width">
                    <ul class="ib clear_spot" id="slider-ul">
                        <!-- 默认第一张选中 -> {.active} -->
                        <li th:each="image,imageStat:${house.houseImageList}">
                            <div><img th:src="${image.url+'?imageView2/1/w/211/h/126'}" th:alt="${house.name}"
                                      th:onclick="'detail_slider('+${imageStat.index}+', false)'">
                            </div>
                        </li>
                    </ul>
                </div>
                <span class="ib next" onclick="detail_slider(1, true)"></span>
            </div>
        </div>

        <div class="ib detail">
            <div class="detail_content">
                <h2 class="font house_info_title" th:text="'['+${house.regionName}+'-'+${house.name}+']'"></h2>
                <div style="margin-top: 14px">
                    <span class="route font route_font"
                          th:if="${null !=house.houseTrafficList && house.houseTrafficList.size()>0}"
                          th:text="${house.houseTrafficList[0].traffic}"></span>
                    <div class="price font route_font">
                        <span class="price_sum" th:text="'￥'+${house.rent}+'元'"></span>/月(季付)
                    </div>
                </div>

                <ul class="clear_spot tags" th:if="${house.houseTags!=null && house.houseTags.size()>0}">
                    <li class="fl" th:each="tag,tagStat:${house.houseTags}"><span th:text="${tag.name}"></span></li>
                </ul>

                <ul class="selling_point" style="list-style-type:disc;">
                    <li><span th:text="'面积：'+${house.area}+'m²'"></span></li>
                    <li><span th:text="'朝向：'+${house.orientationName}"></span></li>
                    <li><span th:text="'户型：'+${house.type}"></span></li>
                    <li><span th:text="'楼层：'+${house.floor}+'/'+${house.totalFloor}+'层'"></span></li>
                    <li><span>交通：</span>
                        <span th:if="${null !=house.houseTrafficList && house.houseTrafficList.size()>0}"
                              th:each="traffic,trafficState:${house.houseTrafficList}"
                              th:text="'['+${traffic.traffic}+'] '">
                        </span>
                    </li>
                </ul>

                <!-- 预约看房按钮 -->
                <div class="btn-grounp clear_fix">
                    <button type="button" class="btn yuyue-btn font yuyue_btn_font">预约看房:4000909956</button>
                    <button type="button" class="btn shouc-btn font sc_fx_font" style="margin: 20px 20px 0 0;"
                            th:onclick="'validateSC()'"><img
                            src="../images/newDetail/content_icon_collect.png" width="25" alt="">收藏
                    </button>
                    <!--<button type="button" class="pr btn fenx-btn font sc_fx_font"><img
                            src="../images/newDetail/content_icon_share.png" width="25" alt="">分享

                        <span class="shareCon pa">
                            &lt;!&ndash; todo 图标 &ndash;&gt;
                        </span>
                    </button>-->
                </div>
            </div>
        </div>
    </div>

    <div class="house-detail-list">
        <div class="house-detail">
            <!-- 标题 -->
            <span class="title font big_title_font">
                房屋描述
            </span>

            <!-- 内容 -->
            <div class="content">
                <p><b>周边：</b><span th:text="${house.periphery}"></span></p>
                <!--<br>
                <p><b>交通：</b>出小区步行可以到达地铁15号线新国展站，出小区东门门就有公交站点，可乘坐顺42；顺22; 等多辆公交车，出行非常便利。</p>-->
            </div>
        </div>

        <div class="house-config">
            <!-- 标题 -->
            <span class="title font big_title_font">
                房屋配置
            </span>

            <!-- 内容 -->
            <div class="content">
                <div>
                    <ul class="clear_fix clear_spot">
                        <li th:if="${house.houseConfig.bed == 1}" class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/icon_bed.png" alt="">
                                <span>床</span>
                            </div>
                        </li>
                        <li th:if="${house.houseConfig.wardrobe == 1}" class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/icon_armoire.png" alt="">
                                <span>衣柜</span>
                            </div>
                        </li>
                        <li th:if="${house.houseConfig.desk == 1}" class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/icon_table.png" alt="">
                                <span>书桌</span>
                            </div>
                        </li>
                        <li th:if="${house.houseConfig.wifi == 1}" class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/icon_wifi.png" alt="">
                                <span>WiFi</span>
                            </div>
                        </li>
                        <li class="fl" th:if="${house.houseConfig.washwheel == 1}">
                            <div class="_area">
                                <img src="../images/newDetail/device_icon_washing.png" alt="">
                                <span>洗衣机</span>
                            </div>
                        </li>

                        <li class="fl" th:if="${house.houseConfig.heater == 1}">
                            <div class="_area">
                                <img src="../images/newDetail/device_icon_waterheater.png" alt="">
                                <span>热水器</span>
                            </div>
                        </li>
                        <li th:if="${house.houseConfig.airCondition == 1}" class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/icon_air.png" alt="">
                                <span>空调</span>
                            </div>
                        </li>
                        <li th:if="${house.houseConfig.microwaveOven == 1}" class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/device_icon_microwave.png" alt="">
                                <span>微波炉</span>
                            </div>
                        </li>

                        <!--<li class="fl">
                            <div class="_area">
                                <img src="../images/newDetail/icon_Lock.png" alt="">
                                <span>智能锁</span>
                            </div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <div class="house-info">
             <span class="title font big_title_font">
                房屋信息
            </span>

            <div class="content">
                <table cellspacing="0">
                    <tr>
                        <th>
                            <div>房间</div>
                        </th>
                        <th>
                            <div>性别</div>
                        </th>
                        <th>
                            <div>年龄</div>
                        </th>
                        <th>
                            <div>职业</div>
                        </th>
                        <th>
                            <div>人数</div>
                        </th>
                        <th>
                            <div>租期</div>
                        </th>
                        <th>
                            <div class="last">房间状态</div>
                        </th>
                    </tr>

                    <tr th:if="${house.houseRoomLiveInfoList!=null && house.houseRoomLiveInfoList.size()>0}"
                        th:each="liveInfoOverview,liveInfoStat:${house.houseRoomLiveInfoList}">
                        <td>
                            <div th:text="${liveInfoOverview.roomNum==null?'1':liveInfoOverview.roomNum}+'居室-'+${liveInfoOverview.area}+'㎡'"></div>
                        </td>
                        <td>
                            <div th:text="${liveInfoOverview.tenementSex==null?'保密':(liveInfoOverview.tenementSex==1?'男':'女')}"></div>
                        </td>
                        <td>
                            <div th:text="${liveInfoOverview.age==null?'保密':liveInfoOverview.age}"></div>
                        </td>
                        <td>
                            <div th:text="${liveInfoOverview.tenementProfession==null?'保密':liveInfoOverview.tenementProfession}"></div>
                        </td>
                        <td>
                            <div th:text="${liveInfoOverview.liveNum==null?1:liveInfoOverview.liveNum}"></div>
                        </td>
                        <td>
                            <div th:text="${liveInfoOverview.startTime==null?'暂无':#dates.format(liveInfoOverview.startTime, 'yyyy年MM月dd日')}+'-'+${liveInfoOverview.endTime==null?'暂无':#dates.format(liveInfoOverview.endTime, 'yyyy年MM月dd日')}"></div>
                        </td>
                        <td th:if="${liveInfoOverview.rentStatus == 1}">
                            <div th:text="可入住"></div>
                        </td>
                        <td th:if="${liveInfoOverview.rentStatus == 2}">
                            <div th:text="已出租"></div>
                        </td>
                    </tr>
                    <tr th:if="${house.houseRoomLiveInfoList.size()==0}" style="text-align: center">
                        <td colspan="7">
                            <div th:text="暂无数据！"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="house-recommend">
            <span class="title font big_title_font">
                房屋推荐
            </span>
            <div class="content" th:if="${ehouse!=null && ehouse.size()>0}">
                <div th:each="eh,ehouseStat:${ehouse}" style="cursor:pointer" th:onclick="'todetail('+${eh.id}+')'">
                    <div class="pr">
                        <img th:src="${eh.cover+'?imageView2/1/w/450/h/298'}" width="100%" th:alt="${eh.name}">
                        <div class="price" th:text="${'￥'+eh.rent+'元/月'}">
                        </div>
                    </div>
                    <span th:text="${eh.regionName} +'-'+${eh.name}+${eh.type}"></span>
                    <span th:if="${null !=eh.houseTrafficList && eh.houseTrafficList.size()>0}"
                          th:each="traffic,trafficState:${eh.houseTrafficList}"
                          th:text="${traffic.traffic}">
                        </span>
                </div>
            </div>
        </div>

    </div>
</div>
<div th:replace="common-footer :: #sub-footer"></div>
<div th:replace="common-rightbar :: #sub-rightbar"></div>
<script type="text/javascript" th:src="@{../js/jquery.min.js}"></script>
<script th:inline="javascript">
    var houseId = [[${house.id}]];
    var scFlag=[[${scFlag}]];
    var dtype=[[${type}]];
</script>
<script th:src="@{../js/zeng/detail.js}"></script>
<script th:src="@{../js/common.js}"></script>
<script th:src="@{../js/login.js}"></script>
</body>
</html>
